/* stylelint-disable */
@import '~styles/settings.scss';

@mixin tippy-arrow($color, $orientation) {
  border-left-color: $color;
  border-right: none;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  @if $orientation == 'top' {
    border-top-color: $color;
    box-shadow: -2px 2px 2px 0 rgba($slate, 0.1);
  } @else if $orientation == 'bottom' {
    top: 0;
    border-bottom-color: $color;
    box-shadow: 1px -2px 3px 0 rgba($slate, 0.1);
  }
}

body .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] {
  @include tippy-arrow($white, 'top');
}
body .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] {
  @include tippy-arrow($white, 'bottom');
}
body .tippy-popper[x-placement^=top] .tippy-tooltip.tip-theme [x-arrow] {
  @include tippy-arrow($tip, 'top');
}
body .tippy-popper[x-placement^=bottom] .tippy-tooltip.tip-theme [x-arrow] {
  @include tippy-arrow($tip, 'bottom');
}

.tippy-popper .tippy-tooltip {
  padding: 0;
  border-radius: 0;
  max-width: rem(290px);

  &.tip-theme {
    box-shadow: 0 1px 3px 0 rgba($slate, 0.25);
  }
}
